import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, 
  TouchableOpacity,BackHandler,Modal,Dimensions
} from 'react-native';
const {height, width} = Dimensions.get('window');
import Toast, {DURATION} from 'react-native-easy-toast';
import Picker from 'react-native-picker';
import BackButton from '../../component/BackButton';
import CommonCell from './CommonCell';
import DeviceStorage from '../../common/DeviceStorage'
import {jumpPage,createAreaData} from '../../common/common';
var _this;
export default class AboutUs extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'关于我们',
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      modal:false
    })
  }
  componentWillMount(){
   
  }
  componentDidMount(){
   // BackHandler.addEventListener('hardwareBackPress', this._handleBackPress);
  }
  componentWillUnmount() {
    //BackHandler.removeEventListener('hardwareBackPress',this._handleBackPress);
  }
  _handleBackPress(){
    // /console.log(Picker)
    //alert(Picker.isPickerShow());
    //console.log('show', _this.state.showPicker);
    if(_this.state.showPicker){
      Picker.hide();
      _this.setState({showPicker: false});
      return true;
    } else {
      return false;
    }
  }
  _saveUser(userInfo){
    
  }
  _cellPress(index){
    if(index == 1){
      this.refs.toast.show('已是最新版本',2000)
    } else if(index == 2){
      this.setState({modal: true})
    }
    
  }
  render(){
    let {userInfo} = this.state;
    const viewStyle={
      marginLeft:0,
      marginRight:0,
      paddingLeft:10,
      paddingRight:10
    }
    const textStyle = {
      color:'#888',
      fontSize:15
    }
    const btnStyle = {
      paddingTop:10,
      paddingBottom:10,
      flex:1
    }
    const btnText = {
      fontSize:16
    }
    return(
      <View style={styles.container}>
        <View style={{justifyContent:'center',alignItems:'center',paddingTop:50,paddingBottom:50}}>
          <Image style={{width:100,height:100}} source={require('../../images/mine/icon_app.png')}/>
          <Text>动画工场V1.0.0</Text>
        </View>
        <CommonCell title='检查更新' rightArrow={true} press={()=>this._cellPress(1)} style={viewStyle}/>
        <CommonCell title='关注动画工场' rightArrow={true} press={()=>this._cellPress(2)} style={viewStyle}/>
        <View style={{flex:1}}></View>
        <View style={{justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#888',fontSize:13}}>辽宁休洛树科技有限公司</Text>
          <Text style={{color:'#888',paddingBottom:10,fontSize:13}}>Copyright©2019 xiuluoshu.com ALL rights reserved</Text>
        </View>
        <Toast ref="toast" position='bottom' positionValue={200} />
        <Modal animationType='none' 
          transparent={true} 
          visible={this.state.modal} 
          onRequestClose={() => {this.setState({modal:false})}}
          style={{flex:1}}>
          <View style={[{flex:1,backgroundColor:'rgba(0,0,0,0.3)'},styles.center]}>
            <View style={[{backgroundColor:'white',width: width*0.8},styles.center]}>
              <View style={[{borderBottomColor:'#2596FF',borderBottomWidth: StyleSheet.hairlineWidth,width:'100%'},styles.center]}>
                <Text style={{fontSize:18,paddingTop:8,paddingBottom:8,color:'#2596FF'}}>提示</Text>
              </View>
              <View style={[styles.center,{paddingTop:30,paddingBottom:30}]}>
                <Image style={{width:width*0.7-30,height:width*0.7-30,marginBottom:30}} source={require('../../images/mine/icon_app_wechat.png')}/>
                <Text style={textStyle}>微信公众号：休洛树动画工场</Text>
                <Text style={textStyle}>长按二维码即可关注</Text>
              </View>
              <View style={{flexDirection:'row',width:'100%',
                borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:'#aaa'}}>
                <TouchableOpacity style={[btnStyle,styles.center]} onPress={()=>this.setState({modal:false})}>
                  <Text style={btnText}>取消</Text>
                </TouchableOpacity>
                <View style={{borderRightWidth:StyleSheet.hairlineWidth,borderRightColor:'#aaa'}}></View>
                <TouchableOpacity style={[btnStyle,styles.center]}>
                  <Text style={btnText}>打开微信</Text>
                </TouchableOpacity>
              </View>
            </View>
            
          </View>

        </Modal>
      </View>
    )
  }
}
const styles = StyleSheet.create({ 
  center: {
    justifyContent:'center',
    alignItems:'center'
  },
  container: {
    flex: 1,
    backgroundColor:'#f0f0f0',
  },
})